<template>
  <div class="user-center-container">
    <el-row :gutter="20">
      <!-- 侧边栏 -->
      <el-col :xs="24" :sm="6" :md="5" :lg="4">
        <div class="user-sidebar">
          <div class="user-info">
            <img :src="basicForm.avatarUrl || defaultAvatar" alt="用户头像" class="user-avatar">
            <h3 class="user-name">{{ basicForm.username }}</h3>
            <p class="user-email">{{ basicForm.email }}</p>
          </div>
          
          <el-menu
            :default-active="activeMenu"
            class="user-menu"
            router
          >
            <el-menu-item index="/user/profile">
              <i class="el-icon-user"></i>
              <span>个人资料</span>
            </el-menu-item>
            <el-menu-item index="/user/bookings">
              <i class="el-icon-tickets"></i>
              <span>我的预订</span>
            </el-menu-item>
            <el-menu-item index="/user/favorites">
              <i class="el-icon-star-on"></i>
              <span>我的收藏</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-col>
      
      <!-- 主要内容区域 -->
      <el-col :xs="24" :sm="18" :md="19" :lg="20">
        <div class="user-content">
          <router-view></router-view>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed, onMounted,reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'
// 路由
const router = useRouter()
const route = useRoute()

// 默认头像
const defaultAvatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
const userName = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')).username : null
// 基本信息表单
const basicForm = reactive({
  username: '',
  nickname: '',
  email: '',
  phone: '',
  address: '',
  avatarUrl: ''
})

// 用户信息
const userInfo = ref({
  id: '',
  username: '',
  email: '',
  phone: '',
  avatar: '',
  avatarUrl: '',
})

// 当前激活的菜单
const activeMenu = computed(() => {
  return route.path
})

// 检查登录状态
const checkAuth = () => {
  const token = localStorage.getItem('token')
  
  if (!token) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return false
  }
  
  return true
}

// 获取用户信息
const getUserInfo = async() => {
  if (!checkAuth()) return
  
  try {
    const res = await request.get(`/user/info/${userName}`)
    
    if (res.data.code === '200') {
      const data = res.data.data
      // 确保所有字段都有默认值
      userInfo.value = {
        avatarUrl: data.avatar || defaultAvatar,
        username: data.username || '',
        nickname: data.nickname || '',
        email: data.email || '',
        phone: data.phone || '',
        address: data.address || ''
      }
      Object.assign(basicForm, {
        username: data.username || '',
        nickname: data.nickname || '',
        email: data.email || '',
        phone: data.phone || '',
        address: data.address || '',
        avatarUrl: data.avatarUrl || defaultAvatar
      })
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
    ElMessage.error('获取用户信息失败')
  }
}

// 组件挂载时检查登录并获取用户信息
onMounted(() => {
  getUserInfo()
})
</script>

<style scoped>
.user-center-container {
  padding: 1rem 0;
}

.user-sidebar {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.user-info {
  padding: 2rem 1rem;
  text-align: center;
  background-color: #f8f9fa;
  border-bottom: 1px solid #eee;
}

.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 1rem;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.user-name {
  margin: 0 0 0.3rem;
  font-size: 1.2rem;
}

.user-email {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
}

.user-menu {
  border-right: none;
}

.user-content {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  min-height: 500px;
  padding: 2rem;
}

@media (max-width: 768px) {
  .user-sidebar {
    margin-bottom: 1.5rem;
  }
  
  .user-avatar {
    width: 60px;
    height: 60px;
  }
}
</style> 